<template>
  <div class="link-setting">
    <el-scrollbar class="side-scroll-bar">
      <el-tabs
        v-model="firstTab"
        type="card"
        class="no-bottom-margin indent-left-margin"
        @tab-click="handleClick"
      >
        <el-tab-pane name="style">
          <span slot="label"><svg-icon icon-class="zujian" />外观</span>
          <div class="form-panel">
            <el-button
              class="btn"
              v-for="(line, index) in lineOptionsKey"
              :style="{
                backgroundColor: linesOptions[line].color,
                borderColor: linesOptions[line].color,
              }"
              :key="index"
              type="info"
              round
              @click="openDetail(linesOptions[line])"
              >{{ line }}</el-button
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
    <el-dialog
      title="线路基本信息"
      :visible="visible"
      width="300px"
      @close="visible = false"
    >
      <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
        <el-form-item label="线路名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="电报码" prop="dbm">
          <el-input v-model="formData.dbm"></el-input>
        </el-form-item>
        <el-form-item label="线路颜色" prop="color">
          <div style="display: flex">
            <el-input v-model="formData.color" readonly></el-input>
            <el-color-picker v-model="formData.color"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="线路状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择">
            <el-option
              v-for="item in status1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["linesOptions"]),
    lineOptionsKey() {
      return Object.keys(this.linesOptions);
    },
  },
  watch: {},
  mounted() {},
  data() {
    return {
      firstTab: "style",
      visible: false,
      status1: [
        {
          value: 1,
          label: "运营中",
        },
        {
          value: 0,
          label: "未开通",
        },
      ],
      formData: {
        name: "1号线",
        dbm: "SHA",
        color: "#000000",
        status: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入线路名", trigger: "blur" }],
        dbm: [{ required: true, message: "请输入线路电报码", trigger: "blur" }],
        color: [{ required: true, message: "请选择颜色", trigger: "change" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
    };
  },
  methods: {
    ...mapMutations(["setData"]),
    handleClick() {},
    openDetail(lineDetail) {
      this.formData = {
        ...lineDetail,
      };
      this.visible = true;
    },
    handleCancel() {
      this.formData = {
        name: "",
        dbm: "",
        color: "",
        status: 1,
      };
    },
    onSubmit() {
      this.visible = false;
      // 将操作数据和设置的数据合并起来全部放到currentPen中
      this.setData({
        linesOptions: {
          ...this.linesOptions,
          [this.formData.name]: { ...this.formData },
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.link-setting {
  width: 100%;
  height: 100%;
  :deep(.el-scrollbar__view) {
    width: 100%;
    height: 100%;
  }
  .form-panel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .btn {
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
